<!--采面明细-->
<template>
  <view class="home u-flex-col">
    <view class="u-p-b-30">
      <u-navbar :title="data.certificateName" :title-bold="true" back-icon-color="#333" title-color="#000"></u-navbar>
      <!-- 工程信息 -->
      <u-card :border="false" box-shadow="0px 0px 8px #ddd6d6" :body-style="{ padding: '0 0' }" :show-head="false">
        <view slot="body">
          <view class="card-row u-flex-col u-p-t-20 u-p-b-30">
            <u-cell-group :border="false">
              <u-cell-item
                v-for="(item, index) in baseInfo"
                title-width="170"
                :key="index"
                :title="item.name"
                :border-bottom="false"
                :title-style="{ color: '#333333' }"
                :value-style="{
                  display: 'flex',
                  paddingLeft: '20rpx',
                  textAlign: 'left',
                  color: '#666666',
                }"
                :arrow="false"
                :value="data[item.value]"
              ></u-cell-item>
            </u-cell-group>
          </view>
        </view>
      </u-card>
      <u-card
        :border="false"
        box-shadow="0px 0px 8px #ddd6d6"
        :body-style="{ padding: '0 30rpx 10rpx' }"
        :show-head="false"
        v-for="(item, index) in list"
        :key="index"
      >
        <view slot="body">
          <view v-if="item.src.length !== 0" class="card-row u-flex u-flex-wrap u-p-t-20 u-p-b-20">
            {{item.src.length }}
            <u-image
              class="u-m-r-10 u-m-b-20"
              v-for="(list, index) in item.src"
              :key="index"
              border-radius="30"
              width="280rpx"
              height="210rpx"
              :src="list"
              @click="viewPic(item.src,index)"
            ></u-image>
          </view>
          <view v-else class="card-row u-flex u-flex-wrap u-p-t-20 u-p-b-20">
            <u-image border-radius="30" width="280rpx" height="210rpx" :src="pic_miss"></u-image>
          </view>
        </view>
      </u-card>
    </view>
  </view>
</template>

<script>
export default {
  name: 'index',
  data() {
    return {
      data: {},
      baseInfo: [
        {
          name: '证书类型',
          value: 'certificateTypeName'
        },
        {
          name: '证书编号',
          value: 'certificateNo'
        },
        {
          name: '证书名称',
          value: 'certificateName'
        },
        {
          name: '发证机构',
          value: 'issuingAgency'
        },
        {
          name: '发证日期',
          value: 'issuingDateValue'
        },
        {
          name: '有效期',
          value: 'expirationDateValue'
        }
      ],
      pic_miss: require('@/static/image/picture_missing.png'),
      list: [
        {
          src: []
        }
      ]
    }
  },
  methods: {
    /**
     * 请求数据
     */
    async getData() {
      let params = {
        archivesType: '2',
        materialType: '002',
        method: 'POST',
        relationId: this.data.id
      }
      await this.$post('/system/archives/findByType', params).then(data => {
        if (data.body && data.body.length > 0) {
          for (let i = 0; i < data.body.length; i++) {
            if (data.body[i].archivesUrl) {
              // #ifdef  H5
              this.list[0].src.push(BASE_IP + BASE_URL + 'system/archives/preview/thumb/' + data.body[i].archivesUrl)

              // #endif
              // #ifndef H5
              this.list[0].src.push(BASE_URL + 'system/archives/preview/thumb/' + data.body[i].archivesUrl)
              // #endif
            }
          }
        }
      })
    },
    viewPic(data, index) {
      uni.previewImage({
        current: index,
        urls: data,
        longPressActions: {}
      })
    }
  },
  mounted() {
    this.getData()
  },
  onLoad(options) {
    const { data } = options
    this.data = JSON.parse(data)
  }
}
</script>

<style lang="scss" scoped>
.home {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
}
</style>

